<template>
    <div class="vux-slider">
        <swiper class="vux-swiper" @on-index-change="onSwiperItemIndexChange" v-model="swiperItemIndex">
            <swiper-item class="vux-swiper" v-for="(item, index) in movie_list" :key="index">
                <img :src="item.images.small" >
                <p class="vux-swiper-desc">{{ item.title }}</p>
            </swiper-item>
        </swiper>

        
        
        <!-- 九宫格 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-home"></span>
                <div class="mui-media-body">Home</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                <div class="mui-media-body">Email</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-chatbubble"></span>
                <div class="mui-media-body">Chat</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-location"></span>
                <div class="mui-media-body">location</div></a></li>
        </ul> 
    </div>

</template>

<script>

import { Toast } from 'mint-ui'
import { Swiper, SwiperItem } from 'vux'
export default {
    components:{
        Swiper,
        SwiperItem
    },
    data () {
        return {
            movie_list: [],
            swiperItemIndex: 1
        }
    },
    created(){
        this.getLunbotu();
    },
    methods:{
        getLunbotu(){
            this.$http.jsonp('https://api.douban.com//v2/movie/top250?start=1&count=3', {},
            { 
                headers: {},
                emulateJSON: true }).then((response) => {
                    this.movie_list = response.data.subjects;
                    console.log(response.data.subjects);
                    console.log(this.movie_list)
                });
        },
        onSwiperItemIndexChange (index) {
            console.log('demo item change', index)
        },
    }
}
</script>

<style lang="scss" scoped>
    .mint-swipe{
        height: 200px;
        .mint-swipe-item{
            &:nth-child(1){
                background-color: chartreuse
            }
            &:nth-child(2){
                background-color: yellowgreen
            }
            &:nth-child(3){
                background-color: hotpink
            }
            
        }
    }
    .mui-grid-view.mui-grid-9{
        background-color: #fff;
        border: 0px
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: 0px
    }

    .vux-swiper img{
        width:100%;
        height: 180px;
    }
</style>


